<!--<template>-->
<!--  <div class="container">-->
<!--    <div class="headerbtn">-->
<!--      <el-button size="mini" class="sx-button-states" :class="{'buttonActive':tabActive==='hang'}" @click="selectTab('hang')">同行映射</el-button>-->
<!--      <el-button size="mini" class="sx-button-states" :class="{'buttonActive':tabActive==='name'}" @click="selectTab('name')">同名映射</el-button>-->
<!--    </div>-->
<!--    <div class="tableBox">-->
<!--      <el-button size="mini" type="primary" class="sx-button-statesprimary" @click="addShow">添加常量</el-button>-->
<!--      <div class="tableList">-->
<!--        <div class="tableleft">-->
<!--          <el-table class="tablecomponent" :data="srcTableData" border style="width: 100%">-->
<!--            <el-table-column prop="column_name" show-overflow-tooltip label="原始表字段" align="center"> </el-table-column>-->
<!--            <el-table-column prop="type_name" show-overflow-tooltip label="字段类型" align="center"> </el-table-column>-->
<!--            <el-table-column prop="remarks" show-overflow-tooltip label="字段注释" align="center"> </el-table-column>-->
<!--            &lt;!&ndash; <el-table-column label="" width="80">-->
<!--              <template>-->
<!--                <img src="../../../assets/triangle.png" alt="">-->
<!--              </template>-->
<!--            </el-table-column> &ndash;&gt;-->
<!--          </el-table>-->
<!--        </div>-->
<!--        <div class="tableRight">-->
<!--          <el-table class="tablecomponent" :data="tarTableData" border style="width: 100%">-->
<!--            <el-table-column label="目标表字段" align="center" width="210">-->
<!--              <template slot-scope="scope">-->
<!--                <el-select class="bule-select" v-model="scope.row.column_name" placeholder="请选择">-->
<!--                  <el-option v-for="item in tarTableData" :key="item.column_name" :label="item.column_name" :value="item.column_name">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="type_name" show-overflow-tooltip label="字段类型" align="center"> </el-table-column>-->
<!--            <el-table-column prop="remarks" show-overflow-tooltip label="字段注释" align="center"> </el-table-column>-->
<!--          </el-table>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 添加常量 &ndash;&gt;-->
<!--    <el-dialog title="添加常量" width="550px" :visible.sync="dialogTableVisible" class="mask">-->
<!--      <div class="maskfrom">-->
<!--        <el-input :rows="16" class="blue-input" placeholder="请输入常量名称" v-model="constname">-->
<!--        </el-input>-->
<!--        <el-input :rows="16" class="blue-input" placeholder="请输入常量值" v-model="constval">-->
<!--        </el-input>-->
<!--        <el-input :rows="16" class="blue-input" placeholder="格式化,例如yyyy-mm-dd" v-model="constformat">-->
<!--        </el-input>-->
<!--      </div>-->
<!--      <ul class="explainItem">-->
<!--        <li>1、输入的常量值将会在被英文单引号包括，如'abc'、'123'等</li>-->
<!--        <li>2、可以配合调度参数使用，如${bdp.system.bizdate}等</li>-->
<!--        <li>3、如果您输入的值无法解析，则类型显示为'未识别'</li>-->
<!--      </ul>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button class="sx-button-states" @click="dialogTableVisible = false" size="mini">取消</el-button>-->
<!--        <el-button class="sx-button-statesprimary" @click="addConst" size="mini" type="primary">确定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {buildTableAllInfos,} from "@/api/integration/metadata";-->


<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      srcTableData: [-->
<!--      ],-->
<!--      tarTableData: [-->
<!--      ],-->
<!--      srcInitTableData: [-->
<!--      ],-->
<!--      tarInitTableData: [-->
<!--      ],-->
<!--      constList: [],-->
<!--      tabActive: 'hang',-->
<!--      dialogTableVisible: false,-->
<!--      // 添加常量-->
<!--      constname: '',-->
<!--      constval: '',-->
<!--      constformat: '',-->

<!--      stepFrom: {-->
<!--        srcTableData: '',-->
<!--        tarTableData: ''-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  async created() {-->
<!--    // 获取目标字段-->
<!--    this.tarTableData = [];-->
<!--    const data = await buildTableAllInfos({-->
<!--      datasourceId: JSON.parse(sessionStorage.getItem('step1')).targetDatasourceId,-->
<!--      tableSchema: JSON.parse(sessionStorage.getItem('step1')).tarSchemaName,-->
<!--      tableName: JSON.parse(sessionStorage.getItem('step1')).tarTableName,-->
<!--    });-->
<!--    this.tarTableData = data.data.columns;-->
<!--    this.tarInitTableData = this.tarTableData;-->
<!--    sessionStorage.setItem('tarTableData', JSON.stringify(data.data.columns))-->

<!--    // 获取原始字段-->
<!--    this.srcTableData = [];-->
<!--    const srcdata = await buildTableAllInfos({-->
<!--      datasourceId: JSON.parse(sessionStorage.getItem('step0')).srcDatasourceId,-->
<!--      tableSchema: JSON.parse(sessionStorage.getItem('step0')).srcSchemaName,-->
<!--      tableName: JSON.parse(sessionStorage.getItem('step0')).srcTableName,-->
<!--    })-->
<!--    if (sessionStorage.getItem('filedstatus') === 'false' && JSON.parse(sessionStorage.getItem('constList'))) {-->
<!--      this.srcTableData = srcdata.data.columns.concat(JSON.parse(sessionStorage.getItem('constList')));-->
<!--      this.srcInitTableData = this.srcTableData.concat(JSON.parse(sessionStorage.getItem('constList')));-->
<!--      sessionStorage.setItem('srcTableData', JSON.stringify(this.srcTableData))-->
<!--    } else {-->
<!--      this.srcTableData = srcdata.data.columns;-->
<!--      this.srcInitTableData = this.srcTableData;-->
<!--      sessionStorage.setItem('srcTableData', JSON.stringify(this.srcTableData))-->
<!--    }-->

<!--    this.stepFrom.srcTableData = this.srcTableData-->
<!--    this.stepFrom.tarTableData = this.tarTableData-->
<!--    sessionStorage.setItem('filedstatus', false)-->
<!--  },-->
<!--  methods: {-->
<!--    tarSelect(index, val) {-->
<!--      const data = JSON.parse(sessionStorage.getItem('tarTableData')).filter((item) => item.column_name === val.column_name)[0]-->
<!--      this.tarTableData.splice(index, 1, data)-->
<!--    },-->
<!--    selectTab(val) {-->
<!--      this.tabActive = val-->
<!--      sessionStorage.setItem('tabActive', val)-->
<!--      console.log(`${val}12453245456455`)-->
<!--      if (val === 'name') {-->
<!--        const srcpublictable = this.tarTableData.map((v) => this.srcTableData.filter((j) => v.column_name.trim() === j.column_name.trim())).flat()-->
<!--        // 获取原始不同的元素-->
<!--        const unsrcTableData = this.srcTableData.filter((item) => !srcpublictable.some((ele) => ele.column_name === item.column_name))-->
<!--        this.srcTableData = [...srcpublictable, ...unsrcTableData]-->
<!--        sessionStorage.setItem('srcTableData', JSON.stringify(this.srcTableData))-->
<!--        // 获取目标不同的数据-->
<!--        const tarpublictable = this.srcTableData.map((v) => this.tarTableData.filter((j) => v.column_name.trim() === j.column_name.trim())).flat()-->
<!--        const untarTableData = this.tarTableData.filter((item) => !tarpublictable.some((ele) => ele.column_name === item.column_name))-->
<!--        this.tarTableData = [...tarpublictable, ...untarTableData]-->
<!--        sessionStorage.setItem('tarTableData', JSON.stringify(this.tarTableData))-->
<!--      } else {-->
<!--        this.constList = JSON.parse(sessionStorage.getItem('constList'))-->
<!--        this.srcTableData = this.srcInitTableData-->
<!--        this.tarTableData = this.tarInitTableData-->
<!--        // this.srcTableData = this.srcTableData.concat(this.constList.filter((item) => !this.srcTableData.some((ele) => ele.column_name === item.column_name)))-->
<!--        console.log(this.srcTableData.concat(this.constList))-->
<!--        sessionStorage.setItem('srcTableData', JSON.stringify(this.srcTableData))-->
<!--        sessionStorage.setItem('tarTableData', JSON.stringify(this.tarTableData))-->
<!--      }-->
<!--    },-->
<!--    addShow() {-->
<!--      this.dialogTableVisible = true-->
<!--      this.constname = ''-->
<!--      this.constval = ''-->
<!--      this.constformat = ''-->
<!--    },-->
<!--    addConst() {-->
<!--      this.constList = JSON.parse(sessionStorage.getItem('constList')) || []-->
<!--      this.constList = [{-->
<!--        remarks: this.constname,-->
<!--        ifPrimaryKey: false,-->
<!--        isnull: 0,-->
<!--        column_name: `'${this.constval}'`,-->
<!--        type_name: this.constformat,-->
<!--      }]-->
<!--      sessionStorage.setItem('constList', JSON.stringify(this.constList))-->
<!--      // console.log(this.srcTableData)-->
<!--      // console.log('获取表格数据')-->
<!--      this.srcTableData = this.srcTableData.concat([{-->
<!--        remarks: this.constname,-->
<!--        ifPrimaryKey: false,-->
<!--        isnull: 0,-->
<!--        column_name: `'${this.constval}'`,-->
<!--        type_name: this.constformat,-->
<!--      }])-->
<!--      // console.log(this.srcTableData)-->
<!--      sessionStorage.setItem('srcTableData', JSON.stringify(this.srcTableData))-->
<!--      this.dialogTableVisible = false-->
<!--    },-->
<!--    delConst(val) {-->
<!--      this.$confirm('此操作将删除该常量数据, 是否继续?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        const list = JSON.parse(sessionStorage.getItem('constList'))-->
<!--        const arr = list.filter((item) => item.column_name !== val.column_name)-->
<!--        sessionStorage.setItem('constList', JSON.stringify(arr))-->
<!--        this.srcTableData = this.srcTableData.filter((item) => item.column_name !== val.column_name)-->
<!--        this.srcInitTableData = this.srcInitTableData.filter((item) => item.column_name !== val.column_name)-->
<!--        this.$message({-->
<!--          type: 'success',-->
<!--          message: '删除成功!'-->
<!--        });-->
<!--      })-->
<!--    },-->
<!--    // 验证是否是常量-->
<!--    istest(val) {-->
<!--      if (val.startsWith("'")) {-->
<!--        return true-->
<!--      }-->
<!--      return false-->
<!--    }-->
<!--  }-->

<!--};-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.container {-->
<!--  padding: 20px 20px 60px 20px;-->
<!--}-->
<!--.tableBox {-->
<!--  background: #fdfdfd;-->
<!--  border: 1px solid rgba(151, 151, 151, 0.5);-->
<!--  border-radius: 6px;-->
<!--  padding: 20px;-->
<!--  margin-top: 10px;-->
<!--}-->
<!--.tableList {-->
<!--  margin-top: 10px;-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--  .tableleft {-->
<!--    width: 60%;-->
<!--  }-->
<!--  .tableRight {-->
<!--    width: 40%;-->
<!--  }-->
<!--}-->
<!--.headerbtn {-->
<!--  .sx-button-states {-->
<!--    margin-left: 0;-->
<!--    margin-right: 10px;-->
<!--  }-->
<!--}-->
<!--.triangle {-->
<!--  position: relative;-->
<!--  width: 0;-->
<!--  height: 0;-->
<!--  border-width: 0 40px 40px;-->
<!--  border-style: solid;-->
<!--  border-color: transparent transparent blue;-->
<!--}-->
<!--.triangle:after {-->
<!--  content: "";-->
<!--  position: absolute;-->
<!--  top: 1px;-->
<!--  left: -38px;-->
<!--  border-width: 0 38px 38px;-->
<!--  border-style: solid;-->
<!--  border-color: transparent transparent yellow;-->
<!--}-->
<!--.buttonActive {-->
<!--  background:rgb(24, 144, 255);-->
<!--  color: #ffffff;-->
<!--}-->
<!--.buttonActive:hover {-->
<!--  background:rgb(24, 144, 255);-->
<!--  color: #ffffff;-->
<!--}-->
<!--.mask {-->
<!--  .maskfrom {-->
<!--    margin-bottom: 30px;-->
<!--    .blue-input {-->
<!--      margin-bottom: 10px;-->
<!--     .el-input__inner {-->
<!--        width: 510px;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  .explainItem {-->
<!--    color: #5c7080;-->
<!--    font-size: 12px;-->
<!--    line-height: 20px;-->
<!--    margin-top: 10px;-->
<!--  }-->
<!--}-->
<!--.dialog-footer {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--}-->
<!--</style>-->
